<template>
	<div>
		<div class="bg_white">
			<template v-for="(info,index) in truckImage" v-if="info.group_value.length > 0">				
				<h4 class="lhh40 pl20">{{info.group_name}}</h4>
				<div class="images fs0">
				    <img class="previewer-demo-img" v-for="(item, index) in info.group_value" :src="item.src" @click="show(index,$event)">
				</div>
			</template>
			<div v-transfer-dom>
			  	<previewer :list="allImage" ref="previewer" :options="options">
			        <i class="iconfont prev" slot="button-before" @click="prev()">&#xe633;</i>
			        <i class="iconfont next" slot="button-after" @click="next()">&#xe603;</i>
		        </previewer>
		    </div>
		</div>
		<scrollTop></scrollTop>
	</div>
</template>

<script>
	import { mapActions, mapGetters } from 'vuex'
	import { Previewer, TransferDom } from 'vux'
	import scrollTop from '../../base/scrollTop.vue'
	export default {
		components: {
			Previewer,
			scrollTop
		},
		directives: {
		    TransferDom
		},
		data () {
			return {
				options: {
			        getThumbBoundsFn (index) {
			          // find thumbnail element
			          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
			          // get window scroll Y
			          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
			          // optionally get horizontal scroll
			          // get position of element relative to viewport
			          let rect = thumbnail.getBoundingClientRect()
			          // w = width
			          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
			          // Good guide on how to get element coordinates:
			          // http://javascript.info/tutorial/coordinates
			        }
			    }
			}
		},
		computed:{
			...mapGetters('detail',[
				'truckImage',
				'allImage'
			])
		},
		methods:{
			...mapActions('detail',[
				'getTruckImage'
			]),
			show (index,e) {
			   [].slice.apply(document.querySelectorAll('.previewer-demo-img')).forEach((item,i) => {
			   		if(item.src == e.target.src) {
			   			this.$refs.previewer.show(i);
			   		}
			   })
		    },
		    prev(){
		    	this.$refs.previewer.prev()
		    },
		    next(){
		    	this.$refs.previewer.next()
		    }
		},
		mounted(){
			this.truck_info_id =  this.$route.query.id;
			this.getTruckImage({truck_info_id:this.truck_info_id})
		}
	}
</script>

<style lang = 'scss' scoped>
	.images {
		img {
			display: inline-block;
			width: 2.72rem;
			height: 1.81333rem;
			margin-left: 0.53333rem;
			margin-bottom: 0.26667rem;
			
		}
	}
	.prev , .next {
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
	}
	.prev{
		left: 0.26667rem;
	}
	.next {
		right: 0.26667rem;
	}
</style>